import styled from 'styled-components'
export const PlayerWrapper = styled.div`
  display:flex;
`
export const LeftWrapper = styled.div`
  width:710px;
  padding:20px;
  border-left:1px solid #ccc;
  border-right:1px solid #ccc;
  .song_info{
    display: flex;

  }
  .cover{
    width: 205px;
    height:204px;
    background-position:-140px -580px;  
    position: relative;
    img{
      position: absolute;
      width: 140px;
      border-radius:50%;
      top:33px;
      left:33px;
    }
  }
  .right{
    margin-left:20px;
    .name{
     .icon{
      display: inline-block;
      width: 54px;
      height: 26px;
      background-position: 0 -463px;
     }
     .song_name{
      font-size:24px;
      color:#333;
      margin-left:15px;
     }
    }
    .artist,.album{
      margin:5px 0;
    }
    .artist_name,.album_name{
      color:#0C73C2;
      margin-left:10px;
    }
    .controls{
      display: flex;
      .btn{
        height:31px;
        border:1px solid #ccc;
        border-radius:5px;
        .icon{
          display: inline-block;
          width: 10px;
        }
      }
      .play{
        width: 80px;
        background-color:rgb(56,109,185);
        color:#fff;
      }
      .add{
        margin-left:-5px;
        background-color:rgb(56,109,185);
        color:#fff;
      }
      .collect,.share,.download{
        width: 54px;
        margin-left:10px;
      }
    }
    .lyric_list{
      margin-top:20px;
      .item{
        padding:2px 0;
      }
    }
  }
`
export const RightWrapper = styled.div`
  width:270px;
  border-right:1px solid #ccc;
  padding:20px;
`